<template>
  <div>
    <el-container>
      <el-aside width="240px">
        <el-menu
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          router
        >
         <menlist v-for="(menu,index) in menu" :key="index" :menu="menu"/>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <!--//左侧面包屑-->
          <div class="left"><Breadcrumb /></div>
          <!--//右侧用户名-->
          <div class="right">
            <!--// //下拉菜单-->
            <el-dropdown @command="doCommand">
              <span class="el-dropdown-link"> {{userName}} </span>

              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div></el-header
        >
        <el-main>
          <!-- //放置一个路由出口 -->
          <router-view
        /></el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import Breadcrumb from "@/components/BreadCrumb.vue";
import { logout } from "@/apis/user";
import menlist from "@/components/menList.vue";

export default {
  name: "Layout",
  components: { Breadcrumb,menlist },
  methods: {
    async doCommand(e) {
      if (e === "logout") {
        //成功返回code 20000
        let res = await logout();
        if (res.data.code === 603) {
          localStorage.clear();
        }
      }
    },
  },
  computed:{
    //计算属性获取vuex中的数据
    userName(){
      return this.$store.state.userName
    },
    //获取vuex中的menu
    menu(){
      return this.$store.state.menuList
    }

  }
};
</script>

<style>
a:link {
  text-decoration: none;
  color: #fff;
}

/* 状态二: 已经访问过的链接 */
a:visited {
  text-decoration: none;
  color: #fff;
}

/* 状态三: 鼠标划过(停留)的链接(默认红色) */
a:hover {
  text-decoration: none;
  color: #fff;
}
/* 状态四: 被点击的链接 */
a:active {
  text-decoration: none;
  color: #fff;
}
.el-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #545c64;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
}

.el-container {
  height: 100vh;
}
.el-menu-vertical-demo {
  border: none;
}
.router-link-active {
  color: yellow !important;
}
</style>